<template>
    <first-template class="input-parameter">
        <div class="titles" slot="title">
            入场教育<Button type="primary" class="add-brake" @click="addParameter">添加入场教育</Button>
        </div>
        <div slot="content" class="contss">
            <div class="list-box">
                 <div class="item" v-for="(item, i) in [1,2,3]" :key="i">
                     <div class="details">
                         <div class="img-box">
                             <img src="" alt="">
                         </div>
                         <div class="detail">
                            <div class="name">浙江亚雀科技有限公司.mp4</div>
                            <span class="decrease">2019-09-09</span>
                         </div>
                     </div>
                     <span class="delete" @click="deletes(item)">删除</span>
                 </div>
            </div>
            <Drawer v-model="showAdd" width="520px" title="添加入场教育">
                <Form :model="formItem" :label-width="100">
                    <Form-item label="选择文件类型：">
                        <Radio-group v-model="formItem.radio">
                            <Radio label="male">图片</Radio>
                            <Radio label="female">视频</Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item label="添加标题：">
                        <Input v-model="formItem.input" placeholder="请输入标题"></Input>
                    </Form-item>
                    <Form-item label="上传文件：">
                         <Upload action="//jsonplaceholder.typicode.com/posts/">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
                         </Upload>
                    </Form-item>
                </Form>
                <div class="footer">
                    <i-button @click="showAdd = false">取消</i-button>
                    <i-button type="primary" @click="confirm">确认</i-button>
                </div>
            </Drawer>
        </div>
    </first-template>
</template>
<script>
export default {
    name: 'inputParameter',
    data () {
        return {
            showAdd: false,
            formItem: {
                radio: ''
            }
        }
    },
    methods: {
        addParameter () {
            this.showAdd = true
        },
        deletes () {},
        confirm () {}
    }
}
</script>
<style lang="less" scoped>
* {
    box-sizing: border-box;
}
.input-parameter {
    /deep/.titles {
        font-size: 18px;
        color: #333;
        .add-brake {
            float:right;
            margin-top: 15px;
        }
    }
    .contss {
        padding: 20px;
        width: 100%;
        .list-box {
            width: 100%;
            .item {
                display:flex;
                align-items: center;
                height: 60px;
                width: 100%;
                border:1px solid #F0F0F0;
                justify-content: space-between;
                margin-bottom: 10px;
                padding: 0 20px;
                .details {
                    display:flex;
                    align-items: center;
                    .img-box {
                        width: 48px;
                        height: 48px;
                        display:flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 10px;
                        border: 1px solid #ddd;
                        img {
                            max-width: 100%;
                            max-height:100%;
                        }
                    }
                    .name {
                        font-size: 14px;
                        color: #333;
                    }
                    .decrease {
                        font-size: 12px;
                        color: #999999;
                    }
                }
                .delete {
                    font-size: 12px;
                    color:#F5222D;
                    cursor: pointer;
                }
            }
        }
    }
}
.footer {
    width: 100%;
    position:absolute;
    right: 0;
    bottom: 0;
    text-align:right;
    padding: 14px 20px;
    border-top: 1px solid #F0F0F0;
    button {
        margin-left: 12px;
    }
}
</style>